import React, { Component } from 'react'
import { Checkbox } from 'antd'
const CheckboxGroup = Checkbox.Group
export default class MyCheckbox extends Component{
  state = {
    checked1: false,
    checkAll: false,
    indeterminate: true,
    options: ['A', 'B', 'C', 'D'],
    checkedList: ['A', 'D']
  }
  onChange1 = e => {
    console.log(e.target.checked)
  }
  onChange2 = e => {
    this.setState({ checked1: e.target.checked })
  }
  onChange3 = e => {
    if (e.target.checked) {
      this.setState({
        indeterminate: false,
        checkedList: this.state.options,
        checkAll: true
      })
    } else {
      this.setState({
        indeterminate: false,
        checkedList: [],
        checkAll: false
      })
    }
  }
  onChange4 = list => {
    if (list.length === this.state.options.length) {
      this.setState({
        indeterminate: false,
        checkedList: list,
        checkAll: true
      })
    } else if (list.length === 0) {
      this.setState({
        indeterminate: false,
        checkedList: list,
        checkAll: false
      })
    } else {
      this.setState({
        indeterminate: true,
        checkedList: list,
        checkAll: false
      })
    }
  }
  render() {
    return(
      <>
        <div className="box">
          <div className="box-header">base</div>
          <div className="box-body">
            <div className="box-content">
              <Checkbox onChange={this.onChange1}></Checkbox>
            </div>
          </div>
        </div>
        <div className="box">
          <div className="box-header">受控</div>
          <div className="box-body">
            <div className="box-content">
              <Checkbox checked={this.state.checked1} onChange={this.onChange2}></Checkbox>
            </div>
          </div>
        </div>
        <div className="box">
          <div className="box-header">全选/反选</div>
          <div className="box-body">
            <div className="box-content">
              <Checkbox indeterminate={this.state.indeterminate} checked={this.state.checkAll} onChange={this.onChange3}>全选</Checkbox>
              <CheckboxGroup value={this.state.checkedList} options={this.state.options} onChange={this.onChange4}></CheckboxGroup>
            </div>
          </div>
        </div>
      </>
    )
  }
}